<!-- 小麦检索界面 -->
<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>

	<meta charset="utf-8">
	<title>农业大数据检索系统-小麦检索</title>
	
	<!-- Animate.css 动画-->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts 图标和字体-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Simple Line Icons 简单线条图标-->
	<link rel="stylesheet" href="css/simple-line-icons.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Owl Carousel 幻灯片插件-->
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">

	<!-- Style -->
	<link rel="stylesheet" href="css/style.css">


	<!-- Modernizr JS 检测兼容性的js
	<script src="js/modernizr-2.6.2.min.js"></script>
	-->

	<!-- FOR IE9 below -->
	<!--[if lt IE 9]-->
	<script src="js/respond.min.js"></script>
	<!--[endif]-->

</head>

<body>
	<header role="banner" id="fh5co-header">
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<!-- Mobile Toggle Menu Button -->
					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
					<a class="navbar-brand" href="index.html"><span>NJAU</span>-ADBS</a> 
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-nav-section="services"><span>Services</span></a></li>
						<li><a href="#" data-nav-section="result"><span>Result</span></a></li>
					</ul>
				</div>
			</div>
		</nav>
	</header>

	<section id="fh5co-services" data-section="services">
		<div style="padding: 100px 100px 10px;">
	   	 	<table class="table table-bordered" style="text-align: center;vertical-align: center;">
  				<caption><center><h2>小麦信息检索</h2></center></caption>
				<tbody>
					<tr>
				    	<td>
				    		<b>统一编号</b>
				    	</td>
				      	<td>
				      		<input type="name" id="unify_id">
				      	</td>
				      	<td>
							&nbsp;
				      	</td>
				     	<td>
							中文名
				     	</td>
				     	<td>
				     		<input type="name" id="name_cn">
				     	</td>
				    </tr>
				    <tr>
				    	<td>
				    		原产地
				    	</td>
				      	<td>
				      		<select id="place">
				     			<option></option>
				     			<option>黑龙江龙江</option>
				     			<option>黑龙江黑河地区农科所</option>
				     			<option>黑龙江红兴隆农科所</option>
				     			<option>黑龙江红兴隆农场</option>
				     			<option>黑龙江省农科院育种所</option>
				     			<option>黑龙江省农科院</option>
				     			<option>美国</option>
				     			<option>波兰</option>
				     			<option>浙江</option>
				     		</select>
				      	</td>
				      	<td>
							&nbsp;
				      	</td>
				     	<td>
							所属科分类
				     	</td>
				     	<td>
				     		<select id="family">
				     			<option></option>
				     			<option>禾本科</option>
				     		</select>
				     	</td>
				    </tr>
				    <tr>
				    	<td>
				    		所属属分类
				    	</td>
				      	<td>
				      		<select id="genus">
				      			<option></option>
				     			<option>小麦属</option>
				     		</select>
				      	</td>
				      	<td>
							&nbsp;
				      	</td>
				     	<td>
							所属种分类
				     	</td>
				     	<td>
				     		<select id="species">
				     			<option></option>
				     		</select>
				     	</td>
				    </tr>
				</tbody>
			</table>   
			<center>
				<input type="submit" name="configure-button" id="configure-button" value="查找"></input> 
				<input type="reset" name="reset-button" id="reset-button" value="重置"></input> 
			</center>
		</div>
	</section>	

	<section id="result-section" data-section="result" role="contentinfo">
		<div id="result"></div>
	</section>

		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<!-- jQuery Easing 特殊的动画效果-->
		<script src="js/jquery.easing.1.3.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.min.js"></script>
		<!-- Waypoints -->
		<script src="js/jquery.waypoints.min.js"></script>
		<!-- Stellar Parallax -->
		<script src="js/jquery.stellar.min.js"></script>
		<!-- Owl Carousel -->
		<script src="js/owl.carousel.min.js"></script>
		<!-- Google Map 
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefOgb1ZWqYtj7raVSmN4PL2WkTrc-KyA&sensor=false"></script>
		<script src="js/google_map.js"></script>
		-->
		<!-- Main JS (Do not remove) -->
		<script src="js/main.js"></script>

		<!-- AJAX进行检索 -->
		<script type="text/javascript">
			$(function(){
		        $("#configure-button").click(function(){
		        	//获得指定元素
		            var unify_id = $("#unify_id").val(); 
		            var nc = $("#name_cn").val();
		            var place = $("#place").find("option:selected").text();
		            var family = $("#family").find("option:selected").text();
		            var genus = $("#genus").find("option:selected").text();
		            var species = $("#species").find("option:selected").text();

		            // alert(nc+nl+_class+order+family);

		            $.ajax({
		            	url:'SearchWheatAction.action',
			            data:{
			            	unify_id:unify_id,
			            	name_cn:nc,
			            	place:place,
			            	family:family,
			            	genus:genus,
			            	species:species
			            },
			            type:'post',
			                dataType:'json', //设置需要返回的数据类型 
			                success : function(data) {
			                	var result = eval("("+data+")");//将数据转换成json类	
			                	// alert(result.id0);

			                	var n = result.length;

			                	// 清除原本result的div下的内容
			                	$("#result").remove();
			                	// alert(n);

			                	if(n > 0){
			                		// 添加结果表格
			                		var section = $("#result-section");
			                		var str ="<div id='result' style='padding: 100px 100px 10px;'><table class='table table-bordered' style='text-align: center;vertical-align: center;'><caption><center><h2>小麦信息检索结果</h2></center></caption><thead><tr><th><b>编号</b></th><th>统一编号</th><th>品种名称</th><th>种</th><th>原产地</th><th>保存单位</th></tr></thead><tbody>";
			                		for(var i=0;i<n;i++){
			                			str += "<tr><td>"+eval("result."+"id"+i.toString())+"</td><td>"+eval("result."+"unify_id"+i.toString())+"</td><td>"+eval("result."+"nc"+i.toString())+"</td><td>"+eval("result."+"species"+i.toString())+"</td><td>"+eval("result."+"place"+i.toString())+"</td><td>"+eval("result."+"company"+i.toString())+"</td></tr>";
			                		}
			                		str += "</tbody></table></div>";
			                		section.html(str);
			                	}else{
			                		alert("该查询下没有结果");
			                	}
			                },
			        });
		        });
		    });
		</script>

	</body>
</html>